<template>
  <div>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <!-- Brand/logo -->
      <a class="navbar-brand" href="#">Logo</a>
      <!-- Links -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" @click="M12">M12</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">dear.{{name}}</a>
        </li>
      </ul>
    </nav>
    <div>
      <div class="container" >
        <div v-for="i in userData" class="card"  style="margin: auto 0 30px auto; text-align: left;"  >
          <div class="card-header" > <a @click="toMdPage(decodeURIComponent(i.ID))" href="#" >{{decodeURIComponent(i.ID)}}</a></div>
          <br>
            <div class="card-body"> <p>{{decodeURIComponent(i.PreviousHash)}}</p></div>
          <br>
              <div class="card-header"> <p>{{decodeURIComponent(i.Timestamp)}}</p></div>
          <br>
              <div class="card-body"><p>{{decodeURIComponent(i.content).substring(0,20)}}......</p></div>
        </div>

    </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'pages1',
    data() {
      return {
        hello: 'Hello World',
        name : "",
        userData:{},
        index :[],
      }
    },
    mounted:function(){
      this.productor();
    },
    methods:{

      productor: function(){
        let that = this;
        this.axios.get('/n')
          .then(function (response) {
            console.log(response)
            if (response.status == 200) {
              that.name = response.data.name;
              console.log(that.name);
              return that.name
            } else {
              alert("工厂爆炸了，生产不了了！！！")
            }
          })
          .catch(function (error) {
            alert("不小心捅破了服务器！！！");
            console.log(error);
          });

      },
      M12 : function () {
        let that = this;
        console.log("--->",this.name);
        //模拟表单数据
        let data = new FormData();
        //添加数据
        data.append('email',this.name);
        this.axios.post("/userData",data)
          .then(function (response) {
            if (response.status === 200) {
              that.userData = response.data;
              console.log(that.userData);
              for(let i in that.userData){
                console.log(i,":",that.userData[i]);
                for(let j in that.userData[i]){
                  console.log(j,":",that.userData[i][j]);
                }

              }
            }else {
              alert("M12爆炸！")
            }
          })
          .catch(function (error) {
            alert("你干什么？？？");
            console.log(error);
          })
      },
     toMdPage:function (dataInt) {
       //保证this 作用域相同
        let that = this;
        //构建POST参数
        let userSelectData = new FormData();
        userSelectData.append('Index',dataInt);
        console.log(dataInt)
       //axios POST请求
       this.axios.post("/showMdData",userSelectData)
         .then(function (response) {
           if (response.status === 200) {
             console.log("准备跳转~")
             that.$router.push({path:'/MD'});
           }else {
             alert("M12爆炸！")
           }
         })
         .catch(function (error) {
           alert("你干什么？？？");
           console.log(error);
         })
      }

    }
  }
</script>

<style scoped>

</style>
